<template>
  <div id="app">
    <v-header :seller='seller'></v-header>
    <div class="tab border-top border-topbottom ">
      <div class="tab-item"><router-link tag='div' to='/Goods'>商品</router-link></div>
      <div class="tab-item"><router-link tag='div' to='/Ratings'>评价</router-link></div>
      <div class="tab-item"><router-link tag='div' to='/Sellers'>商家</router-link></div>
    </div>
    <keep-alive>
      <router-view :seller="seller"/>
    </keep-alive>
  </div>
</template>

<script>
import axios from 'axios'
import vHeader from './components/header/Header'
export default {
  name: 'App',
  data () {
    return {
      seller: {}
    }
  },
  components: {
    vHeader
  },
  created () {
    axios.get('/api/seller').then(this.getInfo)
  },
  methods: {
    getInfo (res) {
      if (res.data) {
        this.seller = res.data.seller
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .tab
    display:flex
    width:100%
    line-height:40px
    text-align:center
    .tab-item
      flex:1
      font-size:14px
      color:rgb(77,85,93)
      .router-link-active
        color:rgb(240,20,20)
</style>
